<template>
	<el-alert title="服务预览, 展开可查看服务主机列表" type="success" :closable="false" />
	<el-divider />
	<el-table :data="tableData" style="width: 100%" class="service-expand">
		<el-table-column type="expand" >
			<template #default="props" >
				<el-popover v-for="(instance,index) in props.row.instances"
				    placement="top-start"
				    title="服务信息"
				    :width="350"
				    trigger="hover"
				  >
					<template #default>
						<p>ID: {{ instance.id }}</p>
						<p>服务描述: {{ instance.description }}</p>
						<p>服务版本: {{ instance.version }}</p>
						<p>注册时间: {{ instance.registrationTime }}</p>
						<p>调用次数: {{ instance.callCount }}</p>
						<p v-if="instance.enabled" style="color: #409EFF;">服务中</p>
						<p v-else style="color: #909399;">已下线</p>
					</template>
					<template #reference>
						<el-button class="node-btn" v-if="instance.enabled" type="primary">{{instance.address + ':' + instance.port}}</el-button>
						<el-button class="node-btn" v-else="instance.enabled" type="info">{{instance.address + ':' + instance.port}}</el-button>
					</template>
				</el-popover>
			</template>
		</el-table-column>
		<el-table-column label="服务名" prop="serviceName" />
		<el-table-column label="服务状态">
			<template #default="scope">
				<el-tag v-if="scope.row.instances.length > 0" type="success">{{ scope.row.instances.length + '个节点服务中' }}</el-tag>
				<el-tag v-else type="info">服务已下线</el-tag>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
import axios from 'axios';

export default {
	
	
	data() {
		return {
			tableData: []
		}
	},
	methods: {
		getServiceState(row) {
			if (row.addresses) {
				let array = row.addresses.split(',');
				return '<el-tag type="success">'+ array.length +'个节点服务中</el-tag>'
			}
			return '<el-tag type="info">服务已下线</el-tag>';
		},
	},
	created() {
		const vue = this;
		axios.get('/servicelist')
		  .then(function (resp) {
		    // handle success
			if (resp.data.success) {
				vue.tableData = resp.data.data;
			}
		  })
		  .catch(function (error) {
		    // handle error
		    console.log(error);
		  })
		  .then(function () {
		    // always executed
		  });
	}
}
</script>

<style>
.node-btn {
	margin-top: 10px;
	margin-left: 60px;
}
</style>
